$(function () {
  //上部分左侧--南丁格尔图--模拟数据1 
  var echarts1Data = [
    { value: 100, name: '涉密载体' },
    { value: 90, name: '打印卡' },
    { value: 80, name: 'CAkey' },
    { value: 70, name: '涉密本' },
  ]
 

  // 图表1---南丁格尔图
  echarts_1();
  // 图表2---
  echarts_2();
  // 图表3---
  echarts_3();
  // 图表4---
  echarts_4();
  // 图表5---
  echarts_5();
  // 图表6---
  echarts_6();
  // 图表7---
  echarts_7();

})




// 图表1
function echarts_1(echarts1Data) {
  // 基于准备好的dom，初始化echarts实例
  var myChart1 = echarts.init(document.getElementById('echarts_1'));
  option1 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      
    },
    legend: {
      left: 'right',
      itemHeight: 8,
      itemWidth: 8,
      textStyle: {
        color: '#333333',
        fontWeight: '500',
        fontSize:'13'
      },
      itemGap: 16,//图例间距
    },
    grid: {
      left: '3%',
      right: '5%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        name: "",//名称
        axisLine: {
          show: true, // 显示坐标轴
          lineStyle: {
            color: "#6e7079",
            width: 1,
            type: "solid",
          },
        },
        axisLabel: {
          // rotate:25,   // 字体一行放不下 旋转45度
          formatter: function (value) {
            return value.length > 10 ? value.substring(0, 10) + '...' : value; // 在这里省略文本并添加省略号...以节省空间。
        }
        // formatter: function (value) {
        //   // 使用省略号并限制长度
        //   if (value.length > 5) {
        //       return value.slice(0, 5) + '...';
        //   } else {
        //       return value;
        //   }
        // },
        // 
        // triggerEvent:true,
        // 开启鼠标悬停时显示完整文本
        // showMaxLabel: false // 确保不会因为过长而隐藏标签
        },
        data: ['2021年', '2022年', '2023年', '2024年', '2025年上半年度'],
      }
    ],
    yAxis: [
      {
        type: 'value',
        name:"平均缺陷密度（个/千行）",
        axisLine:{
          show:false, // 显示坐标轴
          // lineStyle:{
          //   color:"#6e7079",
          //   width:1,
          //   type:"solid",
          // },
        },
        axisTick:{
          lineStyle:{
            color:"#fff"
          }
        },
        splitLine: {
          lineStyle:{
              color:'#ddd',//底色线条颜色
              type:'dashed'
          }
        },
      }
    ],
    series: [
      {
        name: 'CPU软件',
        type: 'line',
        // stack: 'add2',
        emphasis: {
          focus: 'series'
        },
        barWidth:"18%",
        label:{
          show:true,
          //position: 'top',
          textStyle: { color: '#1e50a2', },
        },
        itemStyle: {
          color: '#1e50a2', //柱图颜色
        },
        data: [0.68, 0.58, 0.71, 0.48, 0.44],
      },
      {
        name: 'FPGA软件',
        type: 'line',
        // stack: 'add2',
        emphasis: {
          focus: 'series',
          opacity:0.1,
        },
        barWidth:"18%",
        label:{
          show:true,
          // position: 'top',
          textStyle: { color: '#f08300', },
        },
        itemStyle: {
          color: '#f08300', //柱图颜色
        },
        data: [0.89, 0.89, 0.79, 0.64, 0.47],
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart1.setOption(option1);
  window.addEventListener("resize",function(){
      myChart1.resize();
  });

  
}

// 图表2
function echarts_2(echarts1Data) {
  // 基于准备好的dom，初始化echarts实例
  var myChart2 = echarts.init(document.getElementById('echarts_2'));
  option2 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      
    },
    legend: {
      left: 'right',
      itemHeight: 8,
      itemWidth: 8,
      textStyle: {
        color: '#333333',
        fontWeight: '500',
        fontSize:'13'
      },
      itemGap: 16,//图例间距
    },
    grid: {
      left: '3%',
      right: '5%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        name: "",//名称
        axisLine: {
          show: true, // 显示坐标轴
          lineStyle: {
            color: "#6e7079",
            width: 1,
            type: "solid",
          },
        },
        axisLabel: {
          // rotate:25,   // 字体一行放不下 旋转45度
          formatter: function (value) {
            return value.length > 10 ? value.substring(0, 10) + '...' : value; // 在这里省略文本并添加省略号...以节省空间。
        }
        },
        data: ['508所', '西安分院', '502所', '总体设计部', '510所', '513所'],
      }
    ],
    yAxis: [
      {
        type: 'value',
        name:"个/千行",
        axisLine:{
          show:false, // 显示坐标轴
          // lineStyle:{
          //   color:"#6e7079",
          //   width:1,
          //   type:"solid",
          // },
        },
        axisTick:{
          lineStyle:{
            color:"#fff"
          }
        },
        splitLine: {
          lineStyle:{
              color:'#ddd',//底色线条颜色
              type:'dashed'
          }
        },
      }
    ],
    series: [
      {
        name: '缺陷密度',
        type: 'bar',
        // stack: 'add2',
        emphasis: {
          focus: 'series'
        },
        barWidth:"18%",
        label:{
          show:true,
          position: 'top',
          textStyle: { color: '#1e50a2', },
        },
        itemStyle: {
          color: '#1e50a2', //柱图颜色
        },
        data: [0.41, 0.38, 0.33, 0.22, 0.20, 0.14],
      },
      {
        name: '均值',
        type: 'line',
        // stack: 'add2',
        emphasis: {
          focus: 'series',
          opacity:0.1,
        },
        barWidth:"18%",
        label:{
          show:true,
          // position: 'top',
          textStyle: { color: '#f08300', },
        },
        itemStyle: {
          color: '#f08300', //柱图颜色
        },
        data: [0.44, 0.44, 0.44, 0.44, 0.44, 0.44],
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart2.setOption(option2);
  window.addEventListener("resize",function(){
      myChart2.resize();
  });

  
}

// 图表3
function echarts_3(echarts1Data) {
  // 基于准备好的dom，初始化echarts实例
  var myChart3 = echarts.init(document.getElementById('echarts_3'));
  option3 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      
    },
    legend: {
      left: 'right',
      itemHeight: 8,
      itemWidth: 8,
      textStyle: {
        color: '#333333',
        fontWeight: '500',
        fontSize:'13'
      },
      itemGap: 16,//图例间距
    },
    grid: {
      left: '3%',
      right: '5%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        name: "",//名称
        axisLine: {
          show: true, // 显示坐标轴
          lineStyle: {
            color: "#6e7079",
            width: 1,
            type: "solid",
          },
        },
        axisLabel: {
          // rotate:25,   // 字体一行放不下 旋转45度
          formatter: function (value) {
            return value.length > 10 ? value.substring(0, 10) + '...' : value; // 在这里省略文本并添加省略号...以节省空间。
        }
        },
        data: ['航天恒星', '西安分院', '513所', '总体设计部', '508所', '502所', '510所'],
      }
    ],
    yAxis: [
      {
        type: 'value',
        name:"个/千行",
        axisLine:{
          show:false, // 显示坐标轴
          // lineStyle:{
          //   color:"#6e7079",
          //   width:1,
          //   type:"solid",
          // },
        },
        axisTick:{
          lineStyle:{
            color:"#fff"
          }
        },
        splitLine: {
          lineStyle:{
              color:'#ddd',//底色线条颜色
              type:'dashed'
          }
        },
      }
    ],
    series: [
      {
        name: '缺陷密度',
        type: 'bar',
        // stack: 'add2',
        emphasis: {
          focus: 'series'
        },
        barWidth:"18%",
        label:{
          show:true,
          position: 'top',
          textStyle: { color: '#1e50a2', },
        },
        itemStyle: {
          color: '#1e50a2', //柱图颜色
        },
        data: [0.59, 0.47, 0.30, 0.28, 0.27, 0.25, 0.11],
      },
      {
        name: '均值',
        type: 'line',
        // stack: 'add2',
        emphasis: {
          focus: 'series',
          opacity:0.1,
        },
        barWidth:"18%",
        label:{
          show:true,
          // position: 'top',
          textStyle: { color: '#f08300', },
        },
        itemStyle: {
          color: '#f08300', //柱图颜色
        },
        data: [0.47, 0.47, 0.47, 0.47, 0.47, 0.47, 0.47],
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart3.setOption(option3);
  window.addEventListener("resize",function(){
      myChart3.resize();
  });

  
}

// 图表4
function echarts_4(echarts1Data) {
  // 基于准备好的dom，初始化echarts实例
  var myChart4 = echarts.init(document.getElementById('echarts_4'));
  option4 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      
    },
    legend: {
      left: 'right',
      itemHeight: 8,
      itemWidth: 8,
      textStyle: {
        color: '#333333',
        fontWeight: '500',
        fontSize:'13'
      },
      itemGap: 16,//图例间距
    },
    grid: {
      left: '3%',
      right: '2%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        name: "",//名称
        axisLine: {
          show: true, // 显示坐标轴
          lineStyle: {
            color: "#6e7079",
            width: 1,
            type: "solid",
          },
        },
        axisLabel: {
          rotate:15,   // 字体一行放不下 旋转45度
          formatter: function (value) {
            return value.length > 10 ? value.substring(0, 10) + '...' : value; // 在这里省略文本并添加省略号...以节省空间。
            
          },
          //rotate:25,
          triggerEvent:true,
        },
        data: ['航天时代激光导航', '8511所', '811所', '704所', '801所', '空间中心', '539厂', '上海技物所', '重庆航天机电设计院', '成光所'],
      }
    ],
    yAxis: [
      {
        type: 'value',
        name:"个/千行",
        axisLine:{
          show:false, // 显示坐标轴
          // lineStyle:{
          //   color:"#6e7079",
          //   width:1,
          //   type:"solid",
          // },
        },
        axisTick:{
          lineStyle:{
            color:"#fff"
          }
        },
        splitLine: {
          lineStyle:{
              color:'#ddd',//底色线条颜色
              type:'dashed'
          }
        },
      }
    ],
    series: [
      {
        name: '缺陷密度',
        type: 'bar',
        // stack: 'add2',
        emphasis: {
          focus: 'series'
        },
        barWidth:"18%",
        label:{
          show:true,
          position: 'top',
          textStyle: { color: '#1e50a2', },
        },
        itemStyle: {
          color: '#1e50a2', //柱图颜色
        },
        data: [2.54, 1.84, 1.49, 0.95, 0.90, 0.50, 0.43, 0.34, 0.29, 0.21],
      },
      {
        name: '均值',
        type: 'line',
        // stack: 'add2',
        emphasis: {
          focus: 'series',
          opacity:0.1,
        },
        barWidth:"18%",
        label:{
          show:true,
          // position: 'top',
          textStyle: { color: '#f08300', },
        },
        itemStyle: {
          color: '#f08300', //柱图颜色
        },
        data: [0.44, 0.44, 0.44, 0.44, 0.44, 0.44, 0.44, 0.44, 0.44, 0.44],
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart4.setOption(option4);
  window.addEventListener("resize",function(){
      myChart4.resize();
  });

  
}

// 图表5
function echarts_5(echarts1Data) {
  // 基于准备好的dom，初始化echarts实例
  var myChart5 = echarts.init(document.getElementById('echarts_5'));
  option5 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      
    },
    legend: {
      left: 'right',
      itemHeight: 8,
      itemWidth: 8,
      textStyle: {
        color: '#333333',
        fontWeight: '500',
        fontSize:'13'
      },
      itemGap: 16,//图例间距
    },
    grid: {
      left: '1%',
      right: '1%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        name: "",//名称
        axisLine: {
          show: true, // 显示坐标轴
          lineStyle: {
            color: "#6e7079",
            width: 1,
            type: "solid",
          },
        },
        axisLabel: {
          rotate:20,   // 字体一行放不下 旋转45度
          formatter: function (value) {
            return value.length > 14 ? value.substring(0, 14) + '...' : value; // 在这里省略文本并添加省略号...以节省空间。
        }
        },
        data: ['中电13所', '811所', '804所', '中科院合肥物质科学研究院', '空间中心', '771所', '北京理工大学', '成光所', '8511所', '539厂', '中电25所', '704所'],
      }
    ],
    yAxis: [
      {
        type: 'value',
        name:"个/千行",
        axisLine:{
          show:false, // 显示坐标轴
          // lineStyle:{
          //   color:"#6e7079",
          //   width:1,
          //   type:"solid",
          // },
        },
        axisTick:{
          lineStyle:{
            color:"#fff"
          }
        },
        splitLine: {
          lineStyle:{
              color:'#ddd',//底色线条颜色
              type:'dashed'
          }
        },
      }
    ],
    series: [
      {
        name: '缺陷密度',
        type: 'bar',
        // stack: 'add2',
        emphasis: {
          focus: 'series'
        },
        barWidth:"18%",
        label:{
          show:true,
          position: 'top',
          textStyle: { color: '#1e50a2', },
        },
        itemStyle: {
          color: '#1e50a2', //柱图颜色
        },
        data: [5.81, 2.25, 2.08, 1.50, 1.13, 0.62, 0.56, 0.32, 0.31, 0.21, 0.20, 0.17],
      },
      {
        name: '均值',
        type: 'line',
        // stack: 'add2',
        emphasis: {
          focus: 'series',
          opacity:0.1,
        },
        barWidth:"18%",
        label:{
          show:true,
          // position: 'top',
          textStyle: { color: '#f08300', },
        },
        itemStyle: {
          color: '#f08300', //柱图颜色
        },
        data: [0.47, 0.47, 0.47, 0.47, 0.47, 0.47, 0.47, 0.47, 0.47, 0.47, 0.47, 0.47],
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart5.setOption(option5);
  window.addEventListener("resize",function(){
      myChart5.resize();
  });

  
}


function echarts_6() {
  // 基于准备好的dom，初始化echarts实例
  var myChart6 = echarts.init(document.getElementById('echarts_6'));
    option6 = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        
      },
      legend: {
        left: 'right',
        itemHeight: 8,
        itemWidth: 8,
        textStyle: {
          color: '#333333',
          fontWeight: '500',
          fontSize:'13'
        },
        itemGap: 16,//图例间距
      },
      grid: {
        left: '5%',
        right: '5%',
        bottom: '0%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          name: "单位",//名称
          axisLine: {
            show: true, // 显示坐标轴
            lineStyle: {
              color: "#6e7079",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            rotate:20,   // 字体一行放不下 旋转45度
          //   formatter: function (value) {
          //     return value.length > 5 ? value.substring(0, 5) + '...' : value; // 在这里省略文本并添加省略号...以节省空间。
          // },
          // formatter: function (value) {
          //   // 使用省略号并限制长度
          //   if (value.length > 5) {
          //       return value.slice(0, 5) + '...';
          //   } else {
          //       return value;
          //   }
          // },
          // 
          // triggerEvent:true,
          // 开启鼠标悬停时显示完整文本
          // showMaxLabel: false // 确保不会因为过长而隐藏标签
          },
          data: ['文实不一致：修改程序', '文实不一致：修改文档', '文文不一致：修改文档', '接口协议设计与实现', '逻辑设计', '程序基本问题', '中断设计与实现', '芯片使用规范',],
        }
      ],
      yAxis: [
        {
          type: 'value',
          // min:0,
          // max:100,
          name:"占比",
          axisLine:{
            show:false, // 显示坐标轴
            // lineStyle:{
            //   color:"#6e7079",
            //   width:1,
            //   type:"solid",
            // },
          },
          axisLabel:{
            formatter:'{value}%',
          },
          axisTick:{
            lineStyle:{
              color:"#fff"
            }
          },
          splitLine: {
            lineStyle:{
                color:'#ddd',//底色线条颜色
                type:'dashed'
            }
          },
        }
      ],
      series: [
        {
          name: '院内单位',
          type: 'bar',
          // stack: 'add2',
          emphasis: {
            focus: 'series'
          },
          barWidth:"20%",
          label:{
            show:true,
            formatter:function(params){
              return params.value+'%'
            },
            position: 'top',
            textStyle: { color: '#333', },
          },
          itemStyle: {
            color: '#1e50a2', //柱图颜色
          },
          data: [15, 30, 2, 7, 28, 16, 2, 0,],
        },
        {
          name: '院外单位',
          type: 'bar',
          // stack: 'add2',
          emphasis: {
            focus: 'series',
            opacity:0.1,
          },
          barWidth:"20%",
          label:{
            show:true,
            formatter:function(params){
              return params.value+'%'
            },
            position: 'top',
            textStyle: { color: '#333', },
          },
          itemStyle: {
            color: '#f08300', //柱图颜色
          },
          data: [21, 13, 3, 10, 22, 28, 3, 1,],
        },
        
        
       
      ]
    };
  // 使用刚指定的配置项和数据显示图表。
  myChart6.setOption(option6);
  window.addEventListener("resize",function(){
      myChart6.resize();
  });

  // 超出省略，鼠标移入展示全部名称
  // extension(myChart3,'xAxis')

  
}

function echarts_7() {
  // 基于准备好的dom，初始化echarts实例
  var myChart7 = echarts.init(document.getElementById('echarts_7'));
    option7 = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        
      },
      legend: {
        left: 'right',
        itemHeight: 8,
        itemWidth: 8,
        textStyle: {
          color: '#333333',
          fontWeight: '500',
          fontSize:'13'
        },
        itemGap: 16,//图例间距
      },
      grid: {
        left: '5%',
        right: '5%',
        bottom: '0%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          name: "单位",//名称
          axisLine: {
            show: true, // 显示坐标轴
            lineStyle: {
              color: "#6e7079",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            rotate:20,   // 字体一行放不下 旋转45度
          //   formatter: function (value) {
          //     return value.length > 5 ? value.substring(0, 5) + '...' : value; // 在这里省略文本并添加省略号...以节省空间。
          // },
          // formatter: function (value) {
          //   // 使用省略号并限制长度
          //   if (value.length > 5) {
          //       return value.slice(0, 5) + '...';
          //   } else {
          //       return value;
          //   }
          // },
          // 
          // triggerEvent:true,
          // 开启鼠标悬停时显示完整文本
          // showMaxLabel: false // 确保不会因为过长而隐藏标签
          },
          data: ['编程规范性', '数据设计与处理', '接口设计', '时钟、复位及初始化设计', '时间响应设计', '状态机设计', '时序约束与验证', '综合布局布线验证', '单粒子防护设计', '跨时钟域设计'],
        }
      ],
      yAxis: [
        {
          type: 'value',
          // min:0,
          // max:100,
          name:"占比",
          axisLine:{
            show:false, // 显示坐标轴
            // lineStyle:{
            //   color:"#6e7079",
            //   width:1,
            //   type:"solid",
            // },
          },
          axisLabel:{
            formatter:'{value}%',
          },
          axisTick:{
            lineStyle:{
              color:"#fff"
            }
          },
          splitLine: {
            lineStyle:{
                color:'#ddd',//底色线条颜色
                type:'dashed'
            }
          },
        }
      ],
      series: [
        {
          name: '院内单位',
          type: 'bar',
          // stack: 'add2',
          emphasis: {
            focus: 'series'
          },
          barWidth:"20%",
          label:{
            show:true,
            formatter:function(params){
              return params.value+'%'
            },
            position: 'top',
            textStyle: { color: '#333', },
          },
          itemStyle: {
            color: '#1e50a2', //柱图颜色
          },
          data: [10, 13, 11, 5, 4, 3, 3, 2, 3, 1],
        },
        {
          name: '院外单位',
          type: 'bar',
          // stack: 'add2',
          emphasis: {
            focus: 'series',
            opacity:0.1,
          },
          barWidth:"20%",
          label:{
            show:true,
            formatter:function(params){
              return params.value+'%'
            },
            position: 'top',
            textStyle: { color: '#333', },
          },
          itemStyle: {
            color: '#f08300', //柱图颜色
          },
          data: [18, 6, 6, 3, 3, 3, 3, 2, 1, 2],
        },
        
        
       
      ]
    };
  // 使用刚指定的配置项和数据显示图表。
  myChart7.setOption(option7);
  window.addEventListener("resize",function(){
      myChart7.resize();
  });

  // 超出省略，鼠标移入展示全部名称
  // extension(myChart7,'xAxis')
  
}

